<template>
  <a-layout class="container">
    <a-layout-content class="content">
      <a-form
        name="run"
        :model="formValue"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        ref="formRef"
      >
        <template v-for="item in config.componentList" :key="item.id">
          <FormItem :data="item" />
        </template>
      </a-form>
    </a-layout-content>
  </a-layout>
</template>
<script setup>
import { ref, reactive, onMounted, provide } from "vue";
import { queryFormData } from "@/mockData/form";
import FormItem from "@/form/common/components/FormItem";
import { useCenter } from "@/form/common/hooks/useCenter";
const formRef = ref(null);
const formValue = reactive({});
const config = reactive({
  id: "",
  title: "",
  componentList: [],
});
const { centerMap, initCenter } = useCenter();
onMounted(() => {
  const data = queryFormData();
  config.id = data.id;
  config.title = data.title;
  config.componentList = data.componentList || [];
  initCenter(data.id, formRef);
});
const handleFormUpdate = (newValue) => {
  const newFormValue = Object.assign(formValue, newValue);
  centerMap.dataCenterInstance.setFormValues(newFormValue);
};
provide("formGlobal", {
  formValue,
  handleFormUpdate,
  centerMap,
  formConfig: config,
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.content {
  width: 1200px;
  margin: 50px auto;
  padding: 16px;
  background-color: #fff;
}
</style>
